<template>
  <div class="container clearfix">
    <form
      action=""
      class="filter"
    >

      <div class="btn-bar">
        <el-button
          type="primary"
          @click="add_role()"
        >添加角色<i class="el-icon-upload el-icon--right" /></el-button>
      </div>
    </form>
    <div class="data-table">
      <el-table
        v-loading="table_loading"
        :data="tableData"
        border
        height="660"
        align="center"
        style="width: 100%"
      >
        <el-table-column
          prop="roleName"
          align="center"
          label="角色名称"
        />
        <el-table-column
          prop="description"
          align="center"
          label="权限描述"
        />
        <el-table-column
          prop="roleCount"
          align="center"
          label="已添加人员数"
        />
        <el-table-column
          align="center"
          label="状态"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="0"
              :inactive-value="1"
              @change="change_status(scope.row)"
            />
          </template>
        </el-table-column>

        <el-table-column
          fixed="right"
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="success"
              size="small"
              @click="rewrite(scope.row)"
            >编辑</el-button>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-controller">
      <!-- <el-pagination layout="prev, pager, next"
                     :hide-on-single-page="true"
                     :total="1">
      </el-pagination> -->
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>
import { listAdminRoleDTO } from '../../../api/adminManage'
import { editAdminRole } from '../../../api/roleManage'

export default {
  data() {
    return {
      table_loading: false,
      input: '',
      options: [],
      value: '',
      tableData: [],
      page: 1,
      pageSize: 10,
      page_total: 1,
      data_total: 0,
      page_status: 3
    }
  },
  created() {
    this.get_list()
    if (this.$route.query.status) {
      // 1 添加   2 编辑   3  查看
      this.page_status = this.$route.query.status
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.get_list()
    },
    handleCurrentChange(val) {
      this.page = val
      this.get_list()
    },
    // 编辑详情
    rewrite(row) {
      this.$router.push({
        path: '/add_role',
        query: {
          status: 2,
          role_id: row.id
        }
      })
    },
    // 获取列表
    get_list(options = {
      'pageNum': this.page,
      'pageSize': this.pageSize
    }) {
      this.table_loading = true
      listAdminRoleDTO(options).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.tableData = res.data.roleResponseDTOS
          this.data_total = res.data.count
          this.page_total = Math.ceil(res.data.count / this.pageSize)
          this.table_loading = false
        }
      }).catch((err) => {
        this.table_loading = false
        //   this.$message.error('服务器网络错误，请稍后重试');
        this.$message.error(err)
      })
    },
    add_role() {
      this.$router.push({
        path: '/add_role',
        query: {
          status: 1
        }
      })
    },
    // 切换状态
    change_status(row) {
      editAdminRole({
        roleId: row.id,
        status: row.status
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.$message({
            message: '状态修改成功',
            type: 'success'
          })
          this.get_list()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    }
  }

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .filter {
    margin: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    .title {
      font-size: 16px;
      margin-bottom: 16px;
    }
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .btn-bar {
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .page-controller {
    float: right;
    margin-right: 20px;
  }
}
</style>

